<template>
  <div class="screen-container">
    <fm-nav-bar
      title="横竖屏控制"
      :border="false"
      left-arrow
      @click-left="back"
    />
    <div class="box">
      <fm-cell-group inset>
        <fm-cell
          title="屏幕方向"
          :value="type"
          is-link
          title-class="title"
          value-class="value"
          @click="changeType"
        />
      </fm-cell-group>
      <fm-action-sheet
        description="请选择屏幕方向"
        close-on-click-action
        cancel-text="取消"
        :visible.sync="show"
        :actions="actions"
        @select="onSelect"
        :round="false"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScreenOrientation',
  data() {
    return {
      type: '自动',
      show: false,
      actions: [{ name: '自动' }, { name: '横屏' }, { name: '竖屏' }],
      currentScreenOrientation: '',
    }
  },
  methods: {
    changeType() {
      this.show = true
    },
    onSelect(item) {
      if (typeof yuanchu != 'undefined') {
        if (item.name == '自动') {
          yuanchu.screenOrientation.unlock()
          this.type = '自动'
        } else if (item.name == '竖屏') {
          yuanchu.screenOrientation.lock('portrait')
          this.type = '竖屏'
        } else {
          yuanchu.screenOrientation.lock('landscape')
          this.type = '横屏'
        }
      }
    },
    back() {
      this.$router.go(-1)
    },
  },
  mounted() {
    if (typeof yuanchu != 'undefined') {
      this.currentScreenOrientation = yuanchu?.screenOrientation?.type
      if (
        this.currentScreenOrientation == 'portrait-primary' ||
        this.currentScreenOrientation == 'portrait-secondary'
      ) {
        this.type = '竖屏'
      } else if (
        this.currentScreenOrientation == 'landscape-primary' ||
        this.currentScreenOrientation == 'landscape-secondary'
      ) {
        this.type = '横屏'
      } else {
        this.type = '自动'
      }
    }
  },
}
</script>
<style lang="less" scoped>
.screen-container {
  height: 100%;
  background: #f2f3f5;
  .box {
    margin-top: 48px;
  }
}

/deep/.fm-action-sheet__item {
  font-size: 28px;
}

/deep/.fm-action-sheet__cancel {
  font-size: 28px;
}

.title {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #15171a;
  line-height: 44px;
}

.value {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727478;
  line-height: 44px;
}
</style>